<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/template/internet-template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:jsf="http://xmlns.jcp.org/jsf"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html">
    <ui:define name="title">Música</ui:define>
    <ui:define name="container">
        <h:form class="formSearch">
            <fieldset>
                <legend>Música</legend>
                <h:panelGroup rendered="${songSearch.song != null}">
                    <label class="titleSearch">${songSearch.song.title}</label>
                    <hr/>
                    <div style="font-weight: lighter; font-size: 13px">
                        Atualizado por: ${songSearch.song.updaterUser.name} em
                        <label jsf:value="${songSearch.song.lastUpdate}">
                            <f:convertDateTime pattern="' 'HH:mm:ss' - 'dd/MM/yyyy"/>
                        </label>                    
                    </div>                    
                    <br/>
                    Artista:
                    <a class="linksSearch"  style="font-size: 16px;"
                       href="../artist/page.jsp?idArtist=${songSearch.song.album.artist.id}">${songSearch.song.album.artist.name}</a>
                    <br/>
                    Álbum: <a class="linksSearch"  style="font-size: 16px;"
                              href="../album/page.jsp?idAlbum=${songSearch.song.album.id}">${songSearch.song.album.title}</a>
                    <br/>
                    Duração de ${songSearch.song.durationMinutes} minuto(s)
                    <br/>
                    Gênero:  ${songSearch.song.genre.name}
                    <br/>
                    Compositores:
                    <br/>
                    <ui:repeat value="${songSearch.song.composers}" var="composer">
                        <a style="color: #06799F;text-decoration: underline; font-size: 16px;"  
                            href="../musician/page.jsp?idMusician=${composer.id}"> 
                            ${composer.name}</a>
                        <br/>
                    </ui:repeat>
                    <br/>
                    <hr/>
                    <br/>
                    <h:panelGroup rendered="${songSearch.song.lyricsTranslation != null}">
                        <div style="width:48%;text-align: right;float:left;font-weight: normal">
                            <div style="width:600px;margin:auto;">
                                <div style="white-space: pre;">${songSearch.song.lyrics}</div>
                            </div>
                        </div>
                        <div style="width:48%;text-align: left;float:right;clear:right;font-weight: normal">
                            <div style="width:500px;float:left;">
                                <div style="white-space: pre;">${songSearch.song.lyricsTranslation}</div>
                            </div>
                        </div>
                    </h:panelGroup>
                    <h:panelGroup rendered="${songSearch.song.lyricsTranslation == null}">
                        <div style="width:100%;text-align: center;font-weight: normal">
                            <div style="width:600px;margin:auto;">
                                <div style="white-space: pre;">${songSearch.song.lyrics}</div>
                            </div>
                        </div>
                    </h:panelGroup>                                        
                </h:panelGroup>
                <h:panelGroup rendered="${songSearch.song == null}">
                    Nenhuma música selecionada.
                </h:panelGroup>
            </fieldset>
        </h:form>
    </ui:define>

</ui:composition>

